const path = '../collapse-group/index'
function getRect(selector, all) {
  return new Promise(resolve => {
    wx.createSelectorQuery()
      .in(this)[all ? 'selectAll' : 'select'](selector)
      .boundingClientRect(rect => {
        if (all && Array.isArray(rect) && rect.length) {
          resolve(rect)
        }
        if (!all && rect) {
          resolve(rect)
        }
      })
      .exec()
  })
}
const nextTick = () => new Promise(resolve => setTimeout(resolve, 20))
Component({
  relations: {
    [path]: {
      type: 'ancestor',
      linked(target) {
        this.parent = target
      }
    }
  },
  options: {
    multipleSlots: true
  },
  externalClasses: [
    'active-class',
    'collapse-wrapper-class'
  ],
  properties: {
    name: null
  },
  data: {
    contentHeight: 0,
    expand: false,
    transition: false
  },
  observers: {},
  methods: {
    init() {
      if (!this.parent) {
        return Promise.resolve()
      }
      const { current, accordion } = this.parent.data
      const { child } = this.parent
      const { name } = this.data
      const index = child.indexOf(this)
      const currentName = name == null ? index : name
      const expand = accordion
        ? current === currentName
        : (current || []).some((name) => name === currentName)
      const stack = []
      if (expand !== this.data.expand) {
        stack.push(this.updateStyle(expand))
      }
      let setD = new Promise((resolve, reject) => {
        this.setData({
          index,
          expand
        }, () => {
          resolve()
        })
      })
      stack.push(setD)
      return Promise.all(stack)
    },
    getRect(selector, all) {
      return new Promise(resolve => {
        wx.createSelectorQuery()
          .in(this)[all ? 'selectAll' : 'select'](selector)
          .boundingClientRect(rect => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }
            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    },
    updateStyle(expand) {
      return this.getRect('.collapse-body-wrapper')
        .then((rect) => {
          const height = rect.height
          return new Promise((resolve, reject) => {
            if (expand) {
              this.setData({
                contentHeight: height ? `${height}px` : 'auto'
              }, () => {
                resolve()
              })
            } else {
              this.setData({
                contentHeight: `${height}px`
              }, () => {
                this.setData({
                  contentHeight: 0
                }, () => {
                  resolve()
                })
              })
            }
          })
        })
    },
    toggle() {
      const { name, index, expand } = this.data
      const currentName = name === null ? index : name
      if (this.parent) {
        this.parent.accordionChange(currentName, !expand)
      } else {
        this.setData({
          expand: !expand
        })
        this.updateStyle(!expand)
      }
    },
    onTransitionEnd() {
      if (this.data.expand) {
        this.setData({
          contentHeight: 'auto'
        })
      }
    }
  },
  created() {
  },
  ready() {
    this.init()
      .then(nextTick)
      .then(res => {
        this.setData({
          transition: true
        })
      })
  }
})
